<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    :root {
      --min-size: 12;
      --max-size: 18;
      --container-min: 320;
      --container-max: 2400;
      --viewport-min: 320;
      --viewport-max: 2400;
    }

    .container-adaptive {
      --font-size: calc(var(--min-size) * 1px + (var(--max-size) - var(--min-size)) * (100cqw - var(--container-min) * 1px) / (var(--container-max) - var(--container-min)));
      font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
    }

    .viewport-adaptive {
      --font-size: calc(var(--min-size) * 1px + (var(--max-size) - var(--min-size)) * (100vw - var(--viewport-min) * 1px) / (var(--viewport-max) - var(--viewport-min)));
      font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
    }

    /* Setup size calculation for all max utilities */
    .h1-max,
    .h2-max,
    .h3-max,
    .h4-max,
    .h5-max,
    .h6-max,
    .h7-max,
    .h8-max {
      --font-size: calc(var(--min-size) * 1px + (var(--max-size) - var(--min-size)) * (100cqw - var(--container-min) * 1px) / (var(--container-max) - var(--container-min)));
      font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
    }

    .h1-max {
      --max-size: 128;
    }

    .h2-max {
      --max-size: 96;
    }

    .h3-max {
      --max-size: 64;
    }

    .h4-max {
      --max-size: 48;
    }

    .h5-max {
      --max-size: 32;
    }

    .h6-max {
      --max-size: 24;
    }

    .h7-max {
      --max-size: 16;
    }

    .h8-max {
      --max-size: 12;
    }

    .h1-min {
      --min-size: 128;
    }

    .h2-min {
      --min-size: 96;
    }

    .h3-min {
      --min-size: 64;
    }

    .h4-min {
      --min-size: 48;
    }

    .h5-min {
      --min-size: 32;
    }

    .h6-min {
      --min-size: 24;
    }

    .h7-min {
      --min-size: 16;
    }

    .h8-min {
      --min-size: 12;
    }
  </style>
</head>

<body>
  <h1 class="h5-min h1-max">boxue is 666</h1>
  <h2 class="h6-min h2-max">boxue is 666</h2>
  <h3 class="h7-min h3-max">boxue is 666</h3>
  <h4 class="h8-min h4-max">boxue is 666</h4>

  <script>
    {
      function vortex(n, m) {
        const nums = new Array(n).fill(0).map(() => new Array(m).fill(0));
        let i = 0;// 行号
        let j = 0;// 列号
        let stepI = 0;// 每次i增加的数字
        let stepJ = 1;// 每次j增加的数字
        let count = 1;// 计数器
        function hasBlock() {
          return !nums[i] || nums[i][j] !== 0;
        }
        while (1) {
          nums[i][j] = count++;
          i += stepI;
          j += stepJ;
          if (hasBlock()) {
            i -= stepI;
            j -= stepJ;
            if (stepI === 0) {
              stepI = stepJ;
              stepJ = 0;
            } else {
              stepJ = -stepI;
              stepI = 0;
            }
            i += stepI;
            j += stepJ;
            if (hasBlock()) {
              break;
            }
          }
        }
        return nums;
      }
      console.log(vortex(3, 3));
      console.log(vortex(3, 4));
      console.log(vortex(4, 4));
      console.log(vortex(4, 5));
    }

    {
      function generateSpiralMatrix(rows, columns) {
        const matrix = new Array(rows).fill().map(() => new Array(columns).fill(0));

        let value = 1;
        let topRow = 0;
        let bottomRow = rows - 1;
        let leftColumn = 0;
        let rightColumn = columns - 1;

        while (topRow <= bottomRow && leftColumn <= rightColumn) {
          // Traverse top row
          for (let i = leftColumn; i <= rightColumn; i++) {
            matrix[topRow][i] = value++;
          }
          topRow++;

          // Traverse right column
          for (let i = topRow; i <= bottomRow; i++) {
            matrix[i][rightColumn] = value++;
          }
          rightColumn--;

          // Traverse bottom row
          for (let i = rightColumn; i >= leftColumn; i--) {
            matrix[bottomRow][i] = value++;
          }
          bottomRow--;

          // Traverse left column
          for (let i = bottomRow; i >= topRow; i--) {
            matrix[i][leftColumn] = value++;
          }
          leftColumn++;
        }

        return matrix;
      }

      console.log(generateSpiralMatrix(3, 3));
      console.log(generateSpiralMatrix(3, 4));
      console.log(generateSpiralMatrix(4, 4));
      console.log(generateSpiralMatrix(4, 5));
    }

    {
      function generateSpiralMatrix(n) {
        const matrix = new Array(n).fill().map(() => new Array(n).fill(0));

        let value = 1;
        let topRow = 0;
        let bottomRow = n - 1;
        let leftColumn = 0;
        let rightColumn = n - 1;

        while (topRow <= bottomRow && leftColumn <= rightColumn) {
          // Traverse top row
          for (let i = leftColumn; i <= rightColumn; i++) {
            matrix[topRow][i] = value++;
          }
          topRow++;

          // Traverse right column
          for (let i = topRow; i <= bottomRow; i++) {
            matrix[i][rightColumn] = value++;
          }
          rightColumn--;

          // Traverse bottom row
          for (let i = rightColumn; i >= leftColumn; i--) {
            matrix[bottomRow][i] = value++;
          }
          bottomRow--;

          // Traverse left column
          for (let i = bottomRow; i >= topRow; i--) {
            matrix[i][leftColumn] = value++;
          }
          leftColumn++;
        }

        return matrix;
      }

      const n = 5; // 矩阵的大小
      const spiralMatrix = generateSpiralMatrix(n);
      console.log(spiralMatrix);

      console.log(generateSpiralMatrix(6));
    }
  </script>
</body>

</html>